<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">

  <style>
    * {

      margin: 0;

      padding: 0;

    }



    html,

    body {

      height: 100%;

      overflow: hidden;

    }



    button {

      padding: 5px 10px;

      cursor: pointer;

    }
  </style>

</head>



<body>

  <!---->

  <button value="red">红</button>

  <button value="green">绿</button>

  <button value="blue">蓝</button>


  <script>

    var body = document.querySelector('body'),
      buttons = document.querySelectorAll('button'),
      arr = ['red', 'green', 'blue']
    for (var i = 0; i < buttons.length; i++) {
        let j=i
        buttons[j].onclick = function (val) {
          console.log(j);
          body.style.background = arr[j]
        }
    }
    let num =1;
    num ='javascript';
    //console.log(i);

  </script>

</body>



</html>